<script lang="ts" setup>
import { useMessageUserList } from '@renderer/store/messageUser.store'
import { useUserApproveStore } from '@renderer/store/userApproveList.store'
import { useUserInfoStore } from '@renderer/store/useUserInfo.store'
import {
  ChatbubbleOutline,
  PeopleOutline,
  LogInOutline,
  ChatbubbleSharp,
  PeopleSharp
} from '@vicons/ionicons5'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const itemClick = (path: string): void => {
  router.push(path)
}

const messageCont = computed(() => {
  const cont = useMessageUserList().getUserList.reduce((pre, cur) => {
    return pre + cur.isWei
  }, 0)
  return cont
})

const userCont = computed(() => {
  const data = useUserApproveStore().getUserApproveList.filter((item) => !item.state)
  return data.length
})
</script>

<template>
  <div class="mean">
    <div class="top">
      <n-avatar :size="40" :src="useUserInfoStore().getUserInfo?.headPhoto" />
      <n-badge :value="messageCont">
        <n-icon size="20" @click="itemClick('/home/message')">
          <ChatbubbleSharp v-if="route.name == 'message'" class="active" />
          <ChatbubbleOutline v-else style="color: #909090" />
        </n-icon>
      </n-badge>
      <n-badge :value="userCont">
        <n-icon size="20" @click="itemClick('/home/friend')">
          <PeopleSharp v-if="route.name == 'friend'" class="active" />
          <PeopleOutline v-else style="color: #909090" />
        </n-icon>
      </n-badge>
    </div>
    <div class="bottom">
      <n-icon size="25">
        <LogInOutline />
      </n-icon>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mean {
  width: 50px;
  height: 100%;
  background-color: #2e2e2e;
  display: flex;
  flex-direction: column;
  color: #909090;

  .active {
    color: #47fa7b;
  }
  .top {
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
    flex: 1;
    .n-avatar {
      margin-bottom: 20px;
      overflow: hidden;
      -webkit-app-region: no-drag;
      img {
        object-fit: cover;
      }
    }
    .n-icon {
      -webkit-app-region: no-drag;
      margin-bottom: 20px;
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    .n-icon {
      -webkit-app-region: no-drag;
    }
  }
}
</style>
